{% extends 'base.html' %}
{% load horizon %}
{% load i18n %}
{% block main %}

    <div class="container-fluid" style="display: flex;">
        <div class="right-box">
            <div class="module-title">费用账单</div>
            <div class="module-content">
                <div>您可能想了解：<span class="bl">对账指引、按续产品周期结算说明</span></div>
                <div>1.当月最终账单将在次月3日生产，在次月4日10点后可查看和导出。</div>
                <div>2.CDN.VPC等按月结算的产品，当月消费可在次月3日查看账单。</div>


                <div class="module-box">
                    <ul class="nav nav-tabs" style="position: relative;">
                        <li role="presentation" class="active"><a href="#">按产品类型汇总</a></li>
                    </ul>
                    <table class="table" style="margin-top: 10px;">
                        <thead>
                        <tr>
                            <th>产品类型</th>
                            <th>项目</th>
                            <th>时间</th>
                            <th>应付金额(￥)</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for project_dict in page_data %}
                            <tr>
                                <td class="bl">{{ project_dict.name }}</td>
                                <td>{{ project_dict.projects }}</td>
                                <td>{{ project_dict.date }}</td>
                                <td>{{ project_dict.cost }}</td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                    <hr>
                    <div class="bottom" style="margin: 1px 400px">
                        <nav aria-label="Page navigation">
                            <ul class="pagination pages">
                                {% if page_data.has_previous %}
                                    <li class="paginate_button page-item previous"
                                        id="default-datatable_previous">
                                        <a href='{% url 'horizon:ratingfunction:billing:cost_center' page=page_data.previous_page_number %}'
                                           class="page-link">上一页</a></li>

                                {% else %}
                                    <li class="paginate_button page-item previous disabled"
                                        id="default-datatable_previous">
                                        <a href="{% url "horizon:ratingfunction:billing:cost_center" page=1 %}"
                                           class="page-link">上一页</a>
                                    </li>
                                {% endif %}

                                {% for foo in page_range %}
                                    {% if foo == current_page_num %}
                                        <!--                                        如果是当前页就高亮显示-->
                                        <li class="paginate_button page-item active"><a
                                                href="{% url "horizon:ratingfunction:billing:cost_center" page=current_page_num %}"
                                                class="page-link">{{ current_page_num }}</a>
                                        </li>
                                    {% else %}
                                        <!--                                        如果不是当前页就正常显示-->
                                        <li class="paginate_button page-item"><a
                                                href="{% url "horizon:ratingfunction:billing:cost_center" page=foo %}"
                                                class="page-link">{{ foo }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                {% if page_data.has_next %}
                                    <li class="paginate_button page-item next"
                                        id="default-datatable_next">
                                        <a href="{% url "horizon:ratingfunction:billing:cost_center" page=page_data.next_page_number %}"
                                           class="page-link">下一页</a></li>
                                {% else %}
                                    <li class="paginate_button page-item next disabled"
                                        id="default-datatable_next"><a href="#"
                                                                       class="page-link">下一页</a></li>
                                {% endif %}
                                <li><a class="page">总共 {{ total_page_num }}页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}